<template>
    <ul @click="ulDel">
        <li v-for="(item,index) in props.list" :key="item.id">
            <span>{{ item.title }}</span>
            <button :data-index="index">事件委托的删除按钮</button>
            <!-- <button @click="emit('del',index)">删除按钮</button> -->
        </li>
    </ul>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

// let props = defineProps({
//     list:Array
// })
let props = defineProps<{
    list: {
        id: string,
        title: string
    }[]
}>()

//事件委托
let ulDel = function(e:any):void{
    console.log(e,1212)
   const target = e.target
   //找到元素，判断是否是目标元素，取目标的判断值
   if(target&&target.nodeName=='BUTTON'&&target.dataset){
    emit('del',target.dataset.index)
   }
}

let emit = defineEmits<{ (e: "del", ind: number): void, (e: "del1", ind: number): void }>()


</script>

<style>

</style>
